<!DOCTYPE html>
<html lang="zh-CN" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1,shrink-to-fit=no">
    <meta http-equiv="pragma" content="no-cache">
    <meta http-equiv="Cache-Control" content="no-cache, must-revalidate">
    <meta http-equiv="expires" content="0">
    <title>搜索页</title>
    <link rel="stylesheet" href="../../static/css/bootstrap.min.css" th:href="@{/static/css/bootstrap.min.css}">
    <link rel="stylesheet" href="../../static/css/fileinput.css" th:href="@{/static/css/fileinput.css}">
    <style>

    </style>
</head>
<body>
    <nav class="navbar navbar-light bg-light navbar-expand">
        <a href="/" class="navbar-brand">Shop</a>
        <div class="collapse navbar-collapse">
            <ul class="navbar-nav">
                <li class="nav-item">
                    <a href="/" class="nav-link active">首页</a>
                </li>
                <form   class="form-inline" >
                    <input id="searchText" type="text" placeholder="Search"  class="form-control"/>
                </form>
                <button  id="search"  class="btn btn-primary">搜索</button>
            </ul>
        </div>

        <div th:if="${#strings.isEmpty(session.user)}">
            <div class="btn-group">
                <button class="btn btn-primary dropdown-toggle" data-toggle="dropdown">登录</button>
                <div class="dropdown-menu dropdown-menu-right p-2 text-muted"  style="width: 300px">
                    <form action="/userLogin" data-stopPropagation="true" method="post">
                        <div class="form-group">
                            <input type="hidden" id="path" name="path">
                        </div>
                        <div class="form-group" data-stop>
                            <label>用户名:</label>
                            <input id="username" name="username" type="text" class="form-control" placeholder="username">
                            <div id="noUsername" class="alert alert-danger alert-dismissible fade show" style="display:none">
                                <strong>用户名不能为空</strong>
                                <button id="noUserBtn" type="button" class="close" >&times;</button>
                            </div>
                        </div>
                        <div class="form-group">
                            <label>密码:</label>
                            <input id="password" name="password" type="password" class="form-control" placeholder="password">
                            <div id="noPassword" class="alert alert-danger alert-dismissible fade show" style="display:none">
                                <strong>请输入密码</strong>
                                <button id="noPwdBtn" type="button" class="close" >&times;</button>
                            </div>
                        </div>
                        <div class="form-group" style="margin-top: 2px">
                            <button id="loginSubmit" type="submit" class="btn btn-primary" style="width: 100%;">登录</button>
                            <span id="err" th:if="${not #strings.isEmpty(loginMsg)}">
                                        <div class="alert alert-danger alert-dismissible fade show">
                                            <strong th:text="${loginMsg}"></strong>
                                            <button type="button" class="close" data-dismiss="alert">&times;</button>
                                        </div>
                                    </span>
                        </div>
                        <div class="text-center">
                            <a href="/enroll">>前往注册</a>
                        </div>
                    </form>
                </div>
            </div>
        </div>
        <div id="user" th:if="${session.user}">
            <img th:onclick="'javascript:locate(\''+'/user/'+${session.user.id}+'\')'"
                 style="height: 45px;width: 45px;margin-right: 20px"
                 class="rounded-circle dropdown-toggle" data-toggle="dropdown"
                 th:src="${session.user.iconURL!=null}?${session.iconPathPattern}+${session.user.iconURL}:@{/static/img/default.png}">
            <ul class="dropdown-menu dropdown-menu-right p-2 text-muted" role="menu" style="width: 100px">
                <a class="dropdown-item" href="/show/order/list">我的订单</a>
                <a class="dropdown-item"  href="/show/order/cart">我的购物车</a>
                <a th:if="${session.user.state==1}" class="dropdown-item"  href="/dashboard">管理</a>
                <a class="dropdown-item"  href="/logOut">登出</a>
            </ul>
            <span style="padding-right: 40px" th:text="${session.user.getUsername()}"></span>
        </div>
    </nav>
    <div class="album py-5 ">
        <div class="container">
            <div th:if="${goods.size()==0}" class="text-center">没有找到相关商品</div>
            <div class="row">
                <div class="col-md-4" th:each="good:${goods}">
                    <div class="card mb-4 shadow-sm">
                        <img th:onclick="'javascript:locate(\''+'/goodDetail/'+${good.id}+'\')'" th:src="${goodsPicPath}+${good.pictures.get(0).getPicURl()}" style="height:225px;width:100%;object-fit: cover;overflow: hidden;">
                        <div class="card-body">
                            <strong class="card-text" th:text="${good.name}"></strong>
                            <br>
                            <strong class="card-text" th:text="${good.selling_price}"></strong>
                            <div class="d-flex justify-content-between align-items-center">
                                <div class="btn-group">
                                    <button th:onclick="'javascript:locate(\''+'/goodDetail/'+${good.id}+'\')'" type="button" class="btn btn-sm btn-outline-secondary">View</button>
                                </div>
                                <small class="text-muted"></small>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>




    <script type="text/javascript" src="../../static/js/jquery-3.3.1.js" th:src="@{../../static/js/jquery-3.3.1.js}"></script>
    <script type="text/javascript" src="../../static/js/bootstrap.bundle.min.js" th:src="@{../../static/js/bootstrap.bundle.min.js}"></script>
    <script type="text/javascript" src="../../static/js/piexif.js" th:src="@{../../static/js/piexif.js}"></script>
    <script type="text/javascript" src="../../static/js/fileinput.js" th:src="@{../../static/js/fileinput.js}"></script>
    <script type="text/javascript" src="../../static/js/zh.js" th:src="@{../../static/js/zh.js}"></script>
    <script type="text/javascript">
        $(function () {
            var searchTest=getUrlParam('search');
            console.log(searchTest);
            $(".dropdown-toggle").on("mouseover", function() {
                $(this).dropdown('toggle');
            })
        })

        function getUrlParam(name) {
            var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)"); //构造一个含有目标参数的正则表达式对象
            var r = window.location.search.substr(1).match(reg);  //匹配目标参数
            if (r != null) return unescape(r[2]); return null; //返回参数值
        }

        $('#search').click(function ()
        {
            var searchTest=$('#searchText').val();
            console.log(searchTest)
            if(searchTest==null||searchTest=='')
            {
                return false;
            }
            else
            {
                var tempwindow=window.open('_blank');
                tempwindow.location='/search?search='+searchTest;
            }
        })
        $('#loginSubmit').click(function ()
        {
            var name=$.trim($('#username').val());
            var password=$.trim($('#password').val());
            if(name==""||name==null)
            {
                document.getElementById("noUsername").style.display="block"
                return false;
            }
            else if(password==""||password==null)
            {
                document.getElementById("noPassword").style.display="block"
                return false;
            }
            else
            {
                var path=window.location.pathname;
                if(getUrlParam('search')!=null)
                {
                    path+='?search='+getUrlParam('search');
                }
                $('#path').val(path);
                $('#loginForm').submit;
                return true;
            }
        })
        function locate(string)
        {
            window.open(string);
        }
    </script>
</body>
</html>